/* eslint-disable eqeqeq */
import IconFont from '@/components/IconFont';
import Limit from '@/components/Limit';
import { Avatar, Popconfirm, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import ReplyChildCard from './ReplyChildCard';
import { difftime } from '@/utils/time';


const ReplyCard = ({
  userName,
  userHeadUrl,
  userId,
  bereplyUserName,
  bereplyUserId,
  atUserList,
  token,
  reply,
  setdoreply,
  id,
  doreply,
  currentUser,
  run,
  loading,
  faceIdInfo,
  formRef,
  children,
  createTime,
  curitem,
  scrollRef,
}) => {
  const [curclickid, setcurclickid] = useState();
  const intoRef = useRef();

  const scrollToTargetDiv = () => {
    if (scrollRef.current && intoRef.current) {
      const targetDivOffset = intoRef.current.offsetTop;
      scrollRef?.current?.view?.scroll({
        top: targetDivOffset,
        left: 0,
        behavior: 'smooth',
      });

      //.current.scrollTop(targetDivOffset);
    }
  };

  useEffect(() => {
    if (curitem?.itemMsgId == id) {
      scrollToTargetDiv();
    }
  }, [curitem?.itemMsgId]);

  return (
    <div
      style={{
        overflow: 'hidden',
        display: 'flex',
        transition: 'all 0.2s',
        backgroundColor: doreply?.curitemid ? 'transparent' : doreply?.curid === id ? 'rgba(0, 132, 255, 0.1)' : 'transparent',
        borderRadius: 12,
        cursor: "pointer"
      }}
      ref={intoRef}
      onClick={async (e) => {
        e.stopPropagation();
        await setdoreply({
          name: userName,
          id: userId,
          curid: id,
          type: 'reply',
        });
        scrollToTargetDiv();

      }}
    >
      <div style={{ flex: 1 }}>
        <div className="centerl gap12" style={{ height: 40, marginBottom: 12 }}>
            <Avatar src={userHeadUrl || null}>
              {userName?.charAt(0)}
            </Avatar>
            <b>{userName}</b>
        </div>
        <div
          style={{
            padding: '0 12px 16px 12px',
            border: `1px solid ${token.colorBgThird}`,
            borderRadius: 8,
            marginBottom: 12,
          }}
        >
          <Limit content={reply}></Limit>
          <div className="spread" style={{ color: '#666', fontSize: 12, paddingTop: 12 }}>
            <span>{difftime(dayjs(), dayjs(createTime))}</span>
            <span>
              <b style={{ display: atUserList && atUserList?.length > 0 ? 'inline' : 'none' }}>
                @
              </b>
              {atUserList?.map?.((it) => (
                <span key={it?.name} style={{ padding: '0 4px' }}>
                  {it?.name}
                </span>
              ))}
            </span>
          </div>
        </div>
        <div style={{ marginBottom: 20, borderRadius: 8 }}>
          {children?.map((it, i) => {
            return (
              <ReplyChildCard
                {...it}
                key={i}
                doreply={doreply}
                run={run}
                loading={loading}
                currentUser={currentUser}
                formRef={formRef}
                curitem={curitem}
                setdoreply={setdoreply}
                msgId={id}
                token={token}
                scrollRef={scrollRef}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default ReplyCard;
